<template>
  <div>
    <el-form ref="queryForm" :model="queryParams" :rules="queryRules" :inline="true">
      <el-form-item :label="$t('财务模板')" prop="financialTemplate">
        <span style="display: none">{{ queryParams.financialTemplate }}</span>
        <el-select v-model="queryParams.financialTemplate" :placeholder="$t('财务模板')" clearable @change="changeFinancial($event)">
          <el-option
            v-for="dict in financialTemplateOptions"
            :key="dict.id"
            :label="$t(dict.name)"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('基金')" prop="dealIdList">
        <el-select v-model="queryParams.fundIdList" filterable multiple collapse-tags :placeholder="$t('基金')" @change="changeFundBase($event)">
          <el-option
            v-for="dict in fundBaseListOption"
            :key="dict.id"
            :label="$t(dict.fundName)"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('项目')" prop="dealIdList">
        <el-select v-model="queryParams.dealIdList" filterable multiple clearable collapse-tags :placeholder="$t('项目')">
          <div class="allCheck">
            <el-button v-if="queryParams.dealIdList.length < dealBaseListOption.length" size="mini" @click="choiceDealAll">{{ $t('全选') }}</el-button>
            <el-button v-else size="mini" @click="queryParams.dealIdList = []">{{ $t('取消全选') }}</el-button>
          </div>
          <el-option
            v-for="dict in dealBaseListOption"
            :key="dict.id"
            :label="$t(dict.dealName)"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <div v-if="isShowQueryBtn" style="display: initial">
        <el-form-item :label="$t('年份')" prop="yearS">
          <DatePicker v-model="queryParams.yearS" type="year" style="width: 140px;" value-format="yyyy" :placeholder="$t('年份')" />
        </el-form-item>
        <el-form-item :label="$t('报告周期')" prop="type">
          <el-select v-model="queryParams.type" :placeholder="$t('报告周期')" clearable>
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="$t(dict.dictLabel)"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('数据来源')" prop="dataSourceList">
          <el-select v-model="queryParams.dataSourceList" multiple clearable :placeholder="$t('数据来源')">
            <div class="allCheck">
              <el-button v-if="queryParams.dataSourceList.length < dataSourceOptions.length" size="mini" @click="choiceSourceAll">{{ $t('全选') }}</el-button>
              <el-button v-else size="mini" @click="queryParams.dataSourceList = []">{{ $t('取消全选') }}</el-button>
            </div>
            <el-option
              v-for="dict in dataSourceOptions"
              :key="dict.dictValue"
              :label="$t(dict.dictLabel)"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <div v-if="showQuery">
          <div class="area-header">
            <span class="area-header-title">{{ $t('高级搜索') }}</span>
          </div>
          <div class="rangeForm" style="font-size: 14px;">
            <ul class="rangeBody">
              <li v-for="(Default,ind) in queryParams.queryCriteria" :key="ind + new Date().getTime()">
                <div class="content">
                  <div class="rangeItem" style="padding: 0;">
                    <div>
                      <div class="head">
                        <div class="select">
                          {{ $t('组内关系') }}：
                          <el-select v-model="Default.relation" :placeholder="$t('请选择')">
                            <el-option v-for="item in relationList" :key="item.value" :label="$t(item.label)" :value="item.value" />
                          </el-select>
                        </div>
                        <el-button icon="el-icon-delete" type="text" @click="delFiltrate(ind)" />
                      </div>
                      <div v-for="(sub, indexSub) in Default.queryCriteriaDetail" :key="sub + indexSub" style="margin: 5px 0 5px 0;">
                        <div class="rangeIndex">{{ indexSub + 1 }}</div>
                        <!-- 动态选择select -->
                        <div class="inlineForm" style="float: left">
                          <el-select v-model="sub.indexName" size="mini" :placeholder="$t('请选择')">
                            <el-option v-for="item in indexNameListOption" :key="item.id" :label="$t(item.label)" :value="item.id" />
                          </el-select>
                          <!-- <treeselect
                            v-model="sub.indexName"
                            :options="indexNameListOption"
                            :normalizer="normalizer"
                            :flat="true"
                            :show-count="true"
                            :open-delay="true"
                            open-on-click
                            :branch-nodes-first="true"
                            :placeholder="$t('请选择')"
                            :style="{ width: '160px' }"
                          >
                            <label slot="option-label" slot-scope="{ node, labelClassName }" :class="labelClassName">
                              {{ $t(node.label) }}
                            </label>
                            <label slot="value-label" slot-scope="{ node }">
                              {{ $t(node.label) }}
                            </label>
                          </treeselect> -->
                        </div>
                        <!-- 等于不等于--- -->
                        <el-select v-model="sub.comparisonValue" size="mini" filterable :placeholder="$t('请选择')" clearable>
                          <el-option v-for="conditions in comparisonValueOption" :key="conditions.dictValue" :label="$t(conditions.dictLabel)" :value="conditions.dictLabel" />
                        </el-select>
                        <div class="inlineForm">
                          <money v-model="sub.queryValue" class="clearItem" size="mini" :placeholder="$t('金额')" clearable />
                        </div>
                        <el-button icon="el-icon-plus" type="info" size="mini" circle class="smallC" @click="addRange(ind)" />
                        <el-button icon="el-icon-minus" type="info" size="mini" class="smallC" :disabled="Default.queryCriteriaDetail.length === 1" circle @click="delRange(ind, indexSub)" />
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <div class="addBtn">
              <el-button icon="el-icon-plus" type="text" @click="addFiltrate()">{{ $t('添加筛选条件') }}</el-button>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div
          v-for="(item, index) in queryParams.queryParamsArr"
          :key="index"
        >
          <el-form-item :label="$t('起始年份')" :prop="'queryParamsArr.' + index + '.yearS'" :rules="queryParamsArrRules.yearS">
            <DatePicker v-model="item.yearS" type="year" style="width: 140px;" value-format="yyyy" :placeholder="$t('起始年份')" @input="yearCheck(index)" />
          </el-form-item>
          <el-form-item :label="$t('结束年份')" :prop="'queryParamsArr.' + index + '.yearE'" :rules="queryParamsArrRules.yearE">
            <DatePicker v-model="item.yearE" type="year" style="width: 140px;" value-format="yyyy" :placeholder="$t('结束年份')" @input="yearCheck(index)" />
          </el-form-item>
          <el-form-item :label="$t('报告周期')" :prop="'queryParamsArr.' + index + '.typeList'" :rules="queryParamsArrRules.typeList">
            <el-select :ref="'multiSelect_' + index" v-model="item.typeList" filterable multiple clearable collapse-tags style="width: 140px;" :placeholder="$t('报告周期')">
              <div class="allCheck">
                <el-button v-if="item.typeList.length < typeOptions.length" size="mini" @click="choiceExportAll(item, 'typeList', typeOptions)">{{ $t('全选') }}</el-button>
                <el-button v-else size="mini" @click="item.typeList = []">{{ $t('取消全选') }}</el-button>
              </div>
              <el-option
                v-for="dict in typeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('数据来源')" :prop="'queryParamsArr.' + index + '.dataSourceList'" :rules="queryParamsArrRules.dataSourceList">
            <el-select :ref="'data_source_' + index" v-model="item.dataSourceList" multiple clearable collapse-tags style="width: 140px;" :placeholder="$t('数据来源')" @change="autoClose('data_source_' + index)">
              <div class="allCheck">
                <el-button v-if="item.dataSourceList.length < dataSourceOptions.length" size="mini" @click="choiceExportAll(item, 'dataSourceList', dataSourceOptions)">{{ $t('全选') }}</el-button>
                <el-button v-else size="mini" @click="item.dataSourceList = []">{{ $t('取消全选') }}</el-button>
              </div>
              <el-option
                v-for="dict in dataSourceOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-button icon="el-icon-remove" :disabled="queryParams.queryParamsArr.length <= 1" type="text" @click="delImportQuery(index)" />
          <el-button v-if="index === 0" icon="el-icon-circle-plus" type="text" @click="addImportQuery()" />
        </div>
      </div>
      <el-form-item>
        <div v-if="isShowQueryBtn">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
          <el-button type="warning" icon="el-icon-download" size="mini" @click="importMethod">{{ $t("导出") }}</el-button>
          <el-button v-if="isNotEmpty(queryParams.financialTemplate)" type="success" icon="el-icon-s-tools" size="mini" @click="querySupper">{{ $t('高级搜索') }}</el-button>
        </div>
        <div v-else>
          <el-button type="warning" icon="el-icon-download" size="mini" @click="exportHandle">{{ $t("生成") }}</el-button>
          <el-button type="success" icon="el-icon-refresh" size="mini" @click="getList">{{ $t("刷新") }}</el-button>
        </div>
      </el-form-item>
    </el-form>

    <div style="display: none">
      <el-input v-model="queryParamsList.createBy" />
    </div>
    <el-table v-if="!isShowQueryBtn" v-loading="loading" tooltip-effect="darkTable" :data="dataList" border style="overflow: auto;">
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParamsList.pageNum - 1) * queryParamsList.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('导出条件')" show-overflow-tooltip align="center" min-width="150" max-width="250" prop="remark">
        <template slot-scope="scope">
          <div style="width: 95%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ scope.row.remark }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('创建人')" align="center" prop="createBy.nickName" min-width="100" max-width="200" show-overflow-tooltip />
      <el-table-column :label="$t('创建时间')" align="center" prop="updateTime" min-width="100" max-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('状态')" align="center" prop="status" min-width="100" max-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.status === '导出失败'" :content="scope.row.createBy.id === '1' ? scope.row.remark : ''">
            <span style="color: red">{{ $t(scope.row.status) }}</span>
          </el-tooltip>
          <span v-if="scope.row.status === '已完成'" style="color: green">{{ $t(scope.row.status) }}</span>
          <span v-if="scope.row.status === '生成中'" style="color: orange">{{ $t(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" fixed="right" align="center" class-name="small-padding fixed-width" :width="80">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="deleteHandle(scope.row)">{{ $t('删除') }}</el-link>
          <el-link v-if="scope.row.status === '已完成'" type="primary" :underline="false" @click="downloadFile(scope.row.fileId)">{{ $t('下载') }}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParamsList.pageNum"
      :limit.sync="queryParamsList.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
// import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {
  listPcwDataExportHistory,
  savePcwDataExportHistory,
  delPcwDataExportHistory
} from '@/api/company/pcw/pcwDataExportHistory'
import { selectList } from '@/api/company/pcw/pcwSysType'
import { findDealPost } from '@/api/base/deal/dealBase'
import { findFundFof } from '@/api/fund/fundBase'
import { exportReport } from '@/api/company/pcw/pcwDataBase'
import { downLoadFileOpen } from '@/utils/zipdownload'
import { findListByInvestorIds } from '@/api/deal/investment/dealInvestment'
import { matchSubjectTree } from '@/api/company/pcw/pcwTempSysSubject'
import { listPcwTempSysKey } from '@/api/company/pcw/pcwTempSysKey'

export default {
  components: {
  },
  props: {
    isShowQueryBtn: {
      type: Boolean,
      default: () => true
    },
    viewTable: {
      type: String,
      default: () => 'balance_sheet'
    }
  },
  data() {
    return {
      dataList: [],
      total: 0,
      // 遮盖层
      loading: false,
      // 财务模板下拉
      financialTemplateOptions: [],
      // 报告类型
      typeOptions: [],
      dataSourceOptions: [],
      dealBaseListOption: [],
      dealBaseListOptionSource: [],
      fundBaseListOption: [],
      indexNameListOption: [],
      comparisonValueOption: [],
      relationList: [{ value: 'and', label: this.$t('且') }, { value: 'or', label: this.$t('或') }],
      showQuery: false,
      queryRules: {
        financialTemplate: [{ required: true, message: this.$t('必填信息'),	trigger: 'change' }],
        yearS: [{ required: true, message: this.$t('必填信息'),	trigger: 'change' }],
        type: [{ required: true, message: this.$t('必填信息'),	trigger: 'change' }],
        typeList: [{ required: true, message: this.$t('必填信息'),	trigger: 'change' }],
        dataSourceList: [{ required: true, message: this.$t('必填信息'),	trigger: 'change' }]
      },
      queryParamsArrRules: {
        yearS: [{ required: true, message: this.$t('必填信息'),	trigger: 'change' }],
        yearE: [{ required: true, message: this.$t('必填信息'),	trigger: 'change' }],
        dataSourceList: [{ required: true, message: this.$t('必填信息'),	trigger: 'change' }],
        typeList: [{ required: true, message: this.$t('必填信息'),	trigger: 'change' }]
      },
      // 查询参数
      queryParams: {
        queryCriteria: [],
        financialTemplate: undefined,
        yearS: undefined,
        yearE: undefined,
        dealIdList: [],
        fundIdList: [],
        dataSourceList: [],
        type: undefined,
        typeList: [],
        historyId: undefined,
        pageNum: 1,
        pageSize: 7,
        queryParamsArr: [
          {
            yearS: undefined,
            yearE: undefined,
            dataSourceList: [],
            typeList: []
          }
        ]
      },
      queryParamsList: {
        pageNum: 1,
        pageSize: 10,
        createBy: this.$store.state.user.userId
      }
    }
  },
  computed: {},
  watch: {
    viewTable: {
      handler() {
        this.getPcwTempOption()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // 财务数据报告周期
    this.getDicts('financial_type').then(response => {
      this.typeOptions = response.data
    })
    this.getDicts('pcw_data_source').then(response => {
      this.dataSourceOptions = response.data
    })
    // 财务模板下拉数据 financialTemplateOptions
    selectList().then(response => {
      this.financialTemplateOptions = response.data
      this.initTemplate()
    })
    findDealPost({ scopeAuthority: true, dealStatusIn: ['TH', 'TC'] }).then(response => {
      this.dealBaseListOptionSource = response.data
      this.dealBaseListOption = this.dealBaseListOptionSource
    })
    findFundFof({ scope: true }).then(response => {
      this.fundBaseListOption = response.data
    })
    this.getDicts('comparison_operators').then(response => {
      this.comparisonValueOption = response.data
    })
  },
  methods: {
    /** 加载数据 */
    getList() {
      this.loading = true
      listPcwDataExportHistory(this.queryParamsList).then(response => {
        this.dataList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 周期翻译 */
    typeOptionsFormat(val) {
      var result = []
      val.forEach(item => {
        result.push(this.selectDictLabel(this.typeOptions, item))
      })
      return result.join(',')
    },
    /** 数据源翻译 */
    dataSourceOptionsFormat(val) {
      var result = []
      val.forEach(item => {
        result.push(this.selectDictLabel(this.dataSourceOptions, item))
      })
      return result.join(',')
    },
    /** 财务模板翻译 */
    financialTemplateOptionsFormat(val) {
      const find = this.financialTemplateOptions.find(obj => obj.id === val)
      if (find) {
        return find.name
      }
      return ''
    },
    /** 项目翻译 */
    dealBaseFormat(val) {
      var result = []
      val && val.forEach(item => {
        const obj = this.dealBaseListOption.find(obj => obj.id === item)
        if (obj) {
          result.push(obj.dealName)
        }
      })
      return result.join(',')
    },
    /** 基金翻译 */
    fundBaseFormat(val) {
      var result = []
      val && val.forEach(item => {
        const obj = this.fundBaseListOption.find(obj => obj.id === item)
        if (obj) {
          result.push(obj.fundName)
        }
      })
      return result.join(',')
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        return delPcwDataExportHistory(row.id)
      }).then(() => {
        this.getList()
        this.msgSuccess(this.$t('删除成功'))
      }).catch(() => {
        this.loading = false
      })
    },
    isEmpty(val) {
      return val === undefined || val === null || val === ''
    },
    isNotEmpty(val) {
      return !this.isEmpty(val)
    },
    /** 去掉children=[]的children属性 respectively */
    normalizer(node) {
      if (node.children === undefined || node.children === null || node.children.length <= 0) {
        delete node.children
      }
    },
    /** 获取指标下拉 */
    getPcwTempOption() {
      this.queryParams.queryCriteria = []
      if (this.viewTable !== 'pcw_report') {
        matchSubjectTree({ belongsTable: this.viewTable, typeId: this.queryParams.financialTemplate }).then(response => {
          this.indexNameListOption = []
          if (response.rows !== null && response.rows.length > 0) {
            var options = response.rows[0].children
            options.forEach(item => {
              if (item.tableType === this.viewTable) {
                this.indexNameListOption.push({
                  id: item.keyCode,
                  label: item.keyName
                })
              }
            })
          }
        })
      } else {
        if (this.queryParams.financialTemplate) {
          listPcwTempSysKey({ typeId: this.queryParams.financialTemplate }).then(response => {
            this.indexNameListOption = response.rows
            if (this.indexNameListOption !== null) {
              this.indexNameListOption.forEach((item) => {
                item.id = 'id'
                item.label = item.keyReport
                item.isDisabled = true
                item.disabled = true
                item.children && item.children.forEach(item2 => {
                  item2.id = item2.keyCode
                  item2.label = item2.keyName
                  item2.isDisabled = false
                  item2.disabled = false
                })
              })
            }
          })
        }
      }
      if (this.queryParams.queryCriteria.length <= 0 && this.showQuery) {
        this.addFiltrate()
      }
    },
    /** 导出添加查询条件 */
    addImportQuery() {
      this.queryParams.queryParamsArr.push({
        yearS: undefined,
        yearE: undefined,
        dataSourceList: [],
        typeList: []
      })
    },
    /** 导出删除查询条件 */
    delImportQuery(index) {
      this.queryParams.queryParamsArr.splice(index, 1)
    },
    /** 添加筛选条件 */
    addFiltrate() {
      const row = {
        // 组关系
        relation: 'and',
        queryCriteriaDetail: [{
          indexName: undefined,
          comparisonValue: undefined,
          queryValue: undefined
        }]
      }
      if (!(this.queryParams.queryCriteria instanceof Array)) {
        this.$set(this.queryParams, 'queryCriteria', [])
      }
      this.queryParams.queryCriteria.push(row)
    },
    /** 删除筛选条件 */
    delFiltrate(index) {
      this.queryParams.queryCriteria.splice(index, 1)
      if (this.queryParams.queryCriteria.length === 0) {
        this.showQuery = false
      }
    },
    /** 高级查询 */
    querySupper() {
      this.showQuery = !this.showQuery
      if (this.queryParams.queryCriteria.length <= 0) {
        this.addFiltrate()
      }
    },
    /** 改变财务模板更新下拉指标 */
    changeFinancial(val) {
      console.log(val, '11111')
      if (val === undefined || val === null || val === '') {
        this.showQuery = false
      }
      this.getPcwTempOption()
    },
    /** 组内添加 */
    addRange(index) {
      const row = {
        indexName: undefined,
        comparisonValue: undefined,
        queryValue: undefined
      }
      this.queryParams.queryCriteria[index].queryCriteriaDetail.push(row)
    },
    /** 组内删除 */
    delRange(index, indexSub) {
      this.queryParams.queryCriteria[index].queryCriteriaDetail.splice(indexSub, 1)
      if (this.queryParams.queryCriteria[index].queryCriteriaDetail && this.queryParams.queryCriteria[index].queryCriteriaDetail.length <= 0) {
        this.delFiltrate(index)
      }
    },
    /** 项目全选 */
    choiceDealAll() {
      this.queryParams.dealIdList = []
      this.dealBaseListOption.forEach(item => {
        this.queryParams.dealIdList.push(item.id)
      })
    },
    /**
     * 报告期全选
     */
    choiceExportAll(item, type, option) {
      var arr = []
      option.forEach(item => {
        arr.push(item.dictValue)
      })
      item[type] = arr
    },
    /**
     * 数据来源全选
     */
    choiceSourceAll() {
      this.queryParams.dataSourceList = []
      this.dataSourceOptions.forEach(item => {
        this.queryParams.dataSourceList.push(item.dictValue)
      })
    },
    autoClose(refName) {
      this.$refs[refName] && this.$refs[refName].blur()
    },
    /** 初始化默认选中第一个模板 */
    initTemplate() {
      if (this.financialTemplateOptions !== undefined && this.financialTemplateOptions !== null && this.financialTemplateOptions.length > 0) {
        this.queryParams.financialTemplate = this.financialTemplateOptions[0].id
        // 获取指标下拉
        this.getPcwTempOption()
      }
    },
    /** 选中基金后, 带出对应的项目 */
    changeFundBase(val) {
      this.queryParams.dealIdList = []
      if (val && val.length > 0) {
        findListByInvestorIds({ investorIds: val, dealStatusIn: ['TH', 'TC'] }).then(response => {
          this.dealBaseListOption = []
          response.data && response.data.forEach(item => {
            this.dealBaseListOption.push({ id: item.dealId, dealName: item.dealName })
          })
        })
      } else {
        this.dealBaseListOption = this.dealBaseListOptionSource
      }
    },
    /** 判断年份前后合理性 */
    yearCheck(index) {
      var yearS = this.queryParams.queryParamsArr[index].yearS
      var yearE = this.queryParams.queryParamsArr[index].yearE
      if (this.isNotEmpty(yearS) && this.isNotEmpty(yearE)) {
        yearS = parseInt(yearS)
        yearE = parseInt(yearE)
        if (yearS > yearE) {
          this.msgError(this.$t('起始年份大于结束年份'))
          this.queryParams.queryParamsArr[index].yearE = undefined
        }
      }
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.$refs['queryForm'].validate(valid => {
        if (valid) {
          this.queryParams.pageNum = 1
          this.queryParams.pageSize = 7
          this.$emit('queryParam', this.queryParams)
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.initTemplate()
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 7
      this.queryHandle()
    },
    /** 打开导出页面 */
    importMethod() {
      this.$emit('importMethod', this.queryParams)
    },
    /** 下载 */
    downloadFile(id) {
      downLoadFileOpen(id)
    },
    /** 导出操作 */
    exportHandle() {
      this.$refs['queryForm'].validate(valid => {
        if (valid) {
          this.loading = true
          // 创建数据. 给定状态
          const text = '财务模板:' + this.financialTemplateOptionsFormat(this.queryParams.financialTemplate) + ' ' +
            '基金:' + this.fundBaseFormat(this.queryParams.fundIdList) + ' ' +
            '项目:' + this.dealBaseFormat(this.queryParams.dealIdList) + ' ' +
            this.formatQueryParams()
          savePcwDataExportHistory({ status: '生成中', queryParam: JSON.stringify(this.formatParam()), remark: text }).then(response => {
            this.loading = false
            if (response.code === 200) {
              // 开始导出操作
              if (response.data.id !== null && response.data.id !== '') {
                var query = this.formatParam()
                query.forEach(item => {
                  item.historyId = response.data.id
                })
                exportReport(query)
              }
              this.getList()
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('必填校验失败')
        }
      })
    },
    /** 整理导出请求参数 */
    formatParam() {
      var queryParamList = []
      this.queryParams.queryParamsArr && this.queryParams.queryParamsArr.forEach(item => {
        queryParamList.push({
          financialTemplate: this.queryParams.financialTemplate,
          dealIdList: this.queryParams.dealIdList,
          fundIdList: this.queryParams.fundIdList,
          yearS: item.yearS,
          yearE: item.yearE,
          dataSourceList: item.dataSourceList,
          typeList: item.typeList
        })
      })
      console.log('1', queryParamList)
      return queryParamList
    },
    // 整理查询条件保存起来
    formatQueryParams() {
      if (this.queryParams.queryParamsArr) {
        var text = ''
        this.queryParams.queryParamsArr.forEach((item, index) => {
          text += '  条件' + (index + 1) + ': ' +
          '起始年份:' + item.yearS + ' ' +
          '结束年份:' + item.yearE + ' ' +
          '报告周期:' + this.typeOptionsFormat(item.typeList) + ' ' +
          '数据来源:' + this.dataSourceOptionsFormat(item.dataSourceList)
        })
      }
      return text
    }
  }
}
</script>
<style scoped>
.inlineForm{
  width:150px;
  display: inline-block;
  margin-right: 15px;
}
.inlineUser{
  width:150px;display: inline-block;vertical-align: bottom;margin-right: 15px;
}
.smallC{
  padding: 3px;
}
.colorChoose li.active {
  position: relative;
}

.colorChoose li.active:after {
  position: absolute;
  content: '';
  display: block;
  top: 15px;
  right: 18px;
  width: 6px;
  height: 11px;
  border-style: solid;
  border-color: white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.colorChoose li {
  float: left;
  cursor: pointer;

}
.rangeItem>div{
  margin-bottom: 10px;
}
.rangeItem>div:last-child{
  margin-bottom: 0px;
}

.colorChoose li span {
  height: 24px;
  width: 24px;
  display: block;
  margin: 10px;
}

.el-form .el-form-item .el-form-item__label {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  line-height: 24px;
  color: #525975;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.rangeIndex{
  float: left;
  background: #eeeeee;
  margin: 4px;
  border-radius: 50%;
  font-size: 12px;
  height: 21px;
  width: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
</style>

